<template>
	<view 
		class="map-wrap"
		id="amap"
		:prop="option"
		:change:prop="amap.updateMap">
	</view>
</template>

<script module="amap" lang="renderjs">
	export default {
		data() {
			return {
				map: null,
				planType: null
			}
		},
		methods: {
			setMap(newValue) {
				if (newValue.lng) {
					let pos = new AMap.LngLat(newValue.lng, newValue.lat);
				
					this.map.setCenter(pos);
					
					let planType = null;
					
					let obj = {map: this.map}
					
					switch(newValue.type) {
						case 'transfer':
							planType = new AMap.Transfer(obj); 
						break;
						case 'walking':
							planType = new AMap.Walking(obj); 
							break;
						case 'riding':
							planType = new AMap.Riding(obj); 
							break;
						default:
							planType = new AMap.Driving(obj); 
					}
				
					//构造路线导航类
					
					this.planType = planType;
					
					let startPos = new AMap.LngLat(newValue.longitude, newValue.latitude);
					let stopPos = new AMap.LngLat(newValue.lng, newValue.lat);
					
					this.planType.search(startPos, stopPos, function(status, result) {
						if (status === 'complete') {} else {}
					});
				}
			},
			updateMap(newValue, oldValue, ownerInstance, instance) {
				let timer = null;
				
				let cycle = () => {
					if(timer) clearTimeout(timer);
					
					if(typeof window.AMap === 'object'){
						this.setMap(newValue);
					} else {
						timer = setTimeout(cycle, 1000);
					}
				}
				
				cycle();
			},
			initAMap() {
				let map = new AMap.Map("amap", {
					resizeEnable: true,
					zoom: 13 //地图显示的缩放级别
				});
				
				this.map = map;
			},
			initMap() {
				if (typeof window.AMap === 'object') {
					this.initAMap();
				} else {
					const link = document.createElement('link');
					link.href = 'https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css'
					
					const demoutils = document.createElement('script');
					
					demoutils.src = 'https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js';
					
					const script = document.createElement('script');
					
					let srciptUrl = 'https://webapi.amap.com/maps';
					
					let params = {
						v: '2.0',
						key: '890651203817fd12f51fcdb0c4ef6072',
						plugin: 'AMap.Driving,AMap.Transfer,AMap.Walking,AMap.Riding'
					}
					
					let paramsUrl = '';
					
					Object.keys(params).forEach( item => {
						let subUrl = `${item}=${params[item]}`;
						
						if(paramsUrl){
							paramsUrl = `${paramsUrl}&${subUrl}`;
						} else {
							paramsUrl = subUrl;
						}
						
					})
					
					script.src = `${srciptUrl}?${paramsUrl}`;
									
					script.onload = this.initAMap.bind(this);
					
					document.head.appendChild(link);
					document.head.appendChild(demoutils);
					document.head.appendChild(script);
				}
			}
		},
		created(){},
		mounted() {
			this.initMap();
		}
	}
</script>
<script>
	export default{
		data() {
			return {
				lng: '',
				lat: '',
				latitude: '',
				longitude: '',
				type: '',
				option: {}
			}
		},
		methods: {
			init(option) {
				this.lng = option.lng;
				this.lat = option.lat;
				this.type = option.type
				this.latitude = option.latitude;
				this.longitude = option.longitude;
				
				this.$nextTick(() => {
					this.option = {
						lng: this.lng,
						lat: this.lat,
						latitude: this.latitude,
						longitude: this.longitude,
						type: this.type
					}
				});
			}
		},
		onLoad(option){
			this.init(option);
		},
		onReady() {}
	}
</script>
<style>
	.map-wrap {
		position: absolute;
		top: 0px;
		right: 0px;
		bottom: 0px;
		left: 0px;
	}
</style>
